<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_NEvVK0',
'img_OCG2W1',
'ZY_MiDieXiangTiQuWu_2',
'ZY_3_3',
'ZY_4_4',
'osmar_5',
'ZY_6_6',
'ZY_ChanPinMiaoShu_7',
'ZY_ShangPinBianHao_8',
'ZY_ShangPinBianHao_9',
'ZY_ShangPinBianHao_10',
'ZY_ShangPinBianHao_11'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <link rel="icon" sizes="any" href="${浏览器logo}">
  <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/wantai/pc/css/swiper.min.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/wantai/pc/css/animate.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/wantai/pc/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]--> 
  <style>body{ background: #f7f7f7; } .box{ background: #ffffff; margin: 50px 0; } .box .name{ font-size: 20px; color: #23A04D; } .box .desc{ font-size: 16px; color: #000000; line-height: 30px; margin-top: 40px; } .box .desc .em{ color: rgba(0,0,0,0.8); } .box .title{ font-weight: bold; font-size: 20px; color: #23A04D; padding: 20px 50px; border-bottom: 1px solid rgb(35 160 77 / 30%); } .box .article{ padding: 20px 50px; font-size: 15px; line-height: 25px; }
  .box .img-wrap{
    max-width: 420px;
    border: 1px solid rgb(35 160 77 / 30%); 
    margin-right: 40px;
  }
  .box .img {
   width: 100%;
   height: auto;
  }
  .box .subtile{
    font-size: 14px;
    color: rgba(0,0,0,0.8);;
  }
  </style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <jsp:include page="_top.jsp"></jsp:include> 
  <div class="banner"> 
   <img src="${img_NEvVK0.adImg}" class="img zy" data-type="ad" data-id="${img_NEvVK0.adId}"> 
  </div>

  <cms:art var="art" id="${param.id }"  queryAround="true" ></cms:art>
  <div class="container"> 
   <div class="box"> 
    <div class="flex" style="padding: 40px 50px;"> 
     <div class="img-wrap"><img src="${art.artImage}" class="img zy"></div>
     <div style="width: 100%;"> 
      <div class="flex align-center space-between">
        <p class="name zy">${art.artTitle}</p>
        <span class="subtile">点击数：${art.artCount}</span>
     </div>
      <div> 
       <p class="desc zy">${art.artAbstract}</p>
       <!-- 新增 -->
       <a class="common-btn" href="#form">申请样品</a>
       <div class="social-wrap">
        <cms:ad var="link" code="link"></cms:ad>
        <c:forEach items="${link }" var="item">
         <a href="${item.adUrl}" target="_black"><img src="${item.adImg}" class="social-img" data-type="ad" data-id="${item.adId}"></a>
        </c:forEach>
       </div>
       <!-- 新增结束 -->
      </div>
     </div> 
    </div> 
   </div> 
   <div class="box"> 
    <p class="title zy" data-type="ad" data-id="${ZY_ChanPinMiaoShu_7.adId}">${ZY_ChanPinMiaoShu_7.adTitle}</p> 
    <div class="article">
     ${art.artContent}
    </div> 
   </div>
   <!-- 在线留言 -->
   <!-- 新增 -->
   <a name="form"></a>
   <div class="form-wrap">
    <p class="title">欢迎咨询<span class="desc">（公司的产品正在不断更新中，我们将马上联系您并及时添加更多的产品）</span></p>
    <div class="form-con"  id="data-form">
     <div class="flex flex-wrap">
      <div class="form-input-item">
       <label class="label">姓名</label>
       <input class="input" name="msgUserName" type="text">
      </div>
      <div class="form-input-item">
       <label class="label">电话</label>
       <input class="input" name="msgTel" type="text">
      </div>
      <div class="form-input-item">
       <label class="label"><span class="requrie">*</span>邮箱</label>
       <input class="input" type="text" name="info1">
      </div>
      <div class="form-input-item">
       <label class="label">公司名称</label>
       <input class="input" type="text" name="info2">
      </div>
      <div class="form-input-item">
       <label class="label"><span class="requrie">*</span>类型</label>
       <select class="select" name="msgType">
        <option value="询价">询价</option>
        <option value="申请样品">申请样品</option>
        <option value="其他">其他</option>
       </select>
      </div>
      <div class="form-input-item">
       <label class="label">标题</label>
       <input class="input" type="text" name="info3">
      </div>
     </div>
     <div class="form-texteare-item flex ">
      <label class="label"><span class="requrie">*</span>描述</label>
      <textarea class="flex-1 content" placeholder="请输入需要咨询的信息" name="msgContent"></textarea>
     </div>
     <div  class="form-checkbox-item">
      <label>
       <input type="checkbox" name="reading">我已阅读并同意<a href="javascript;">《隐私承诺》</a>
      </label>
     </div>
     <button type="button" class="submit-btn common-btn" onclick="submit()">提交</button>
    </div>
   </div>
   <!-- 新增结束 -->
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>
  <script src="https://hwfile.csxuncong.com/jiangyouyao/mobile/js/jquery.min.js"></script>
  <script src="https://hwfile.csxuncong.com/wantai/pc/js/swiper.min.js"></script>
  <script>
        function submit() {
         var result = {};
         var fields = $("div#data-form input[type='text']");

         for (var i = 0; i < fields.length; i++) {
          var field = fields[i];
          var name = $(field).attr('name');
          var value = $(field).val();
          if (name == 'info1') {
           if (!value) {
            alert("请填写完成信息");
            return;
           }
          }
          if (name in result) {
           result[name] += "," + value;
          } else {
           result[name] = value;
          }
         }

         var name1 = $($('.select')[0]).attr('name');
         var value1 = $($('.select')[0]).val();
         result[name1] = value1;

         if (!$($('.content')[0]).val()) {
          alert("请填写完成信息");
          return;
         }
         result[$($('.content')[0]).attr('name')] = $($('.content')[0]).val();

         console.log(result);

         var checkbox = $("div#data-form input[type='checkbox']")[0];
         if (!$(checkbox).prop('checked')) {
          alert("请勾选已阅读并同意");
         }

         $.post("${path}/do/visitor/addMsg",result,function(){
          alert("感谢您的意见！");
          location.reload();
         });
        }
    </script> 
 </body>
</html>